a {
color: #6699ff;
text-decoration: none;
}
 
a:hover {
color: #99aaff;
text-decoration: underline;
}
 
body {
background: #666;
font-family: Arial, sans-serif;
overflow-y: scroll;
padding: 50px;
}

code {
font-family: monospace;
font-size: 16px;
}
 
div#container {
background: #000;
color: white;
margin: 0 auto 0 auto;
padding: 20px 30px 30px 30px;
width: 1000px;
}
  
h1 {
border-bottom: 1px solid #aaa;
color: white;
font-family: Arial, sans-serif;
margin: 0 0 30px 0;
padding: 0 0 10px 0;
}
 
img {
border: none;
}

input {
font-family: Arial, sans-serif;
}

li{
line-height: 1.5em;
list-style: square;
}
 
p {
color: #eee;
/* font-size: 14px; */
line-height: 1.5em;
}

pre {
color: white;
font-family: Menlo, Consolas, Courier New, monospace;
font-size: 12px;
line-height: 1.5em;
margin: 0 0 0 20px;
}


.warningMessage {
background: #333;
border: 1px dashed #ffff00;
color: #dddd00;
font-size: 100%;
font-weight: bold;
padding: 10px;
margin: 0 0 30px 0;
width: 618px;
}

.trackNotSupported {
display: none;
}

.trackSupported {
}

video {
height: 360px;
margin: 20px 0 20px 0;
width: 640px;
}



div#eric video {
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, transparent, transparent 80%, rgba(255,255,255,0.2));
margin: 0;
}

div#eric  {
width: 640px
}

div#eric > div {
margin-top: 2em;
text-align: center;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}

div#eric > div > div:last-child {
position: relative;
top: -36px;
}
div#eric > div > div {
color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
height:  25px;
opacity: 1;
-webkit-transition: all 500ms ease-in-out;
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg);
}
div#eric > div > div.on {
opacity: 1;
-webkit-transform: rotateX(0);
}
